<script setup>
import * as echarts from 'echarts'
import { CostincomeECharts } from '../../../utils/CostincomeECharts.js'
import { usercostincomeinfoGetService } from '@/api/user/vegetableplot'
CostincomeECharts('CostincomeECharts')
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useTransition } from '@vueuse/core'

const costincomeinfo = ref([])

const salesamountinfo = ref()

const profitrate = ref()
//动态数据的逻辑
const incomeSource = ref(0)
const incomeValue = useTransition(incomeSource, { duration: 1500 })

const costSource = ref(0)
const costValue = useTransition(costSource, { duration: 1500 })

const profitrateSource = ref(0)
const profitrateValue = useTransition(profitrateSource, { duration: 1500 })
const router = useRouter()
const Ms = ref({
  vegetableid: ''
})
const chartInstance = ref(null)

onMounted(async () => {
  //Ms.value.id = router.currentRoute.value.query.id
  Ms.value.vegetableid = router.currentRoute.value.query.vegetableid
  //console.log(Ms.value.vegetableid)
  const res = await usercostincomeinfoGetService(Ms.value)
  costincomeinfo.value = res.data.data
  salesamountinfo.value = costincomeinfo.value[0].salesamount
  // 获取 totalcosts 参数值
  const totalCosts = parseFloat(router.currentRoute.value.query.totalcosts)
  // 计算 profitrate
  const profitRate = (salesamountinfo.value / totalCosts) * 100
  // 格式化 profitrate，保留小数点后两位
  profitrate.value = profitRate.toFixed(2)
  //成本数据动态
  incomeSource.value = salesamountinfo.value
  costSource.value = totalCosts
  profitrateSource.value = profitRate
  //console.log(salesamountinfo.value)
  const chart = echarts.init(
    document.getElementById('CostincomeECharts'),
    'back'
  )
  initChart(
    chart,
    router.currentRoute.value.query.seedcosts,
    router.currentRoute.value.query.fertilizercosts,
    router.currentRoute.value.query.pesticidecosts,
    router.currentRoute.value.query.laborcosts,
    router.currentRoute.value.query.othercosts
  )
  chart.resize()
  chartInstance.value = chart
})
onUnmounted(() => {
  if (chartInstance.value) {
    chartInstance.value.dispose()
  }
})
function initChart(chart, A, B, C, D, E) {
  chart.setOption({
    title: {
      text: '成本收益条形图'
    },
    xAxis: {
      type: 'category',
      data: ['种子费用', '肥料费用', '农药费用', '人工费用', '其他费用']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [A, B, C, D, E],
        type: 'bar',

        label: {
          show: true, // 显示标签
          position: 'top', // 标签位置
          color: '#333', // 标签文字颜色
          fontSize: 12 // 标签文字大小
        }
      }
    ]
  })
}
</script>

<template>
  <PageContainer>
    <div class="container">
      <el-statistic :value="costValue" class="item1">
        <template #title>
          <div style="display: inline-flex; align-items: center">成本</div>
        </template>
      </el-statistic>
      <el-statistic :value="incomeValue" class="item1">
        <template #title>
          <div style="display: inline-flex; align-items: center">收益</div>
        </template>
      </el-statistic>
      <el-statistic
        :value="profitrateValue"
        title="New transactions today"
        class="item1"
      >
        <template v-slot:suffix>
          <i>%</i>
        </template>
        <template #title>
          <div style="display: inline-flex; align-items: center">利润率</div>
        </template>
      </el-statistic>
    </div>
    <div
      :style="{ width: '835px', height: '300px' }"
      id="CostincomeECharts"
      class="item1"
    >
      <strong>菜地品种</strong>
    </div>
  </PageContainer>
</template>
<style>
.container {
  display: flex;
  justify-content: space-between;
}
.item1 {
  /* 可选样式 */
  flex: 1;
  margin: 10px; /* 元素间的间距 */
  padding: 20px; /* 元素内部间距 */
  background-color: #fff; /* 元素背景颜色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  text-align: center; /* 文本居中显示 */
}
</style>
